import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // 路由跳转进度条
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'
import { asyncRoutes } from '@/router/index'

NProgress.configure({ showSpinner: false }) // 路由跳转加载小圆圈隐藏

// 白名单: 不需要token可以直接访问的页面
const whiteList = ['/login', '/404']

// 前置路由导航守卫
router.beforeEach((to, from, next) => {
  // 修改网页标题
  document.title = getPageTitle(to.meta.title)
  next()
})

// 前置路由导航守卫
router.beforeEach(async(to, from, next) => {
  // 路由导航进度条开始加载
  NProgress.start()
  // 获取token
  const token = store.state.user.token
  // 有token就不能去登录页 只能去主页
  if (token && to.path === '/login') {
    next('/')
    Message.error('您已经登录,不能再去登录页,回到主页')
    // 路由导航进度条完成加载
    NProgress.done()
    // 没有token且访问的不是白名单就只能去登录页
  } else if (!token && !whiteList.includes(to.path)) {
    next('/login')
    Message.error('您还没有登录,请先在登录页登录')
    // 路由导航进度条完成加载
    NProgress.done()
  } else {
    // 发送ajax请求用户个人信息(没有userId且有token才发)
    if (!store.state.user.userInfo.userId && token) {
      await store.dispatch('user/getUserInfo')
      // 获取每个员工所能看到数组页面
      const menus = store.state.user.userInfo.roles.menus
      // 将动态路由通过menus筛选
      const filterMenus = menus.map(name => {
        return asyncRoutes.find(item => item.children[0].name === name)
      })
      // 补充404页面
      filterMenus.push({ path: '*', redirect: '/404', hidden: true })
      // 改写成动态添加的方式
      router.addRoutes(filterMenus)
      // 将动态路由存到vuex中
      store.commit('menu/setMenuList', filterMenus)
      // 解决刷新出现白屏的bug
      next({
        ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
        replace: true // 重进一次 不保留重复历史
      })
    } else {
      next()
    }
    next()
  }
})

router.afterEach(() => {
  // 路由导航进度条完成加载
  NProgress.done()
})
